@charset "utf-8";
/*背景色*/
$bgF5:#f5f5f5;
$bgFFF:#fff;
$bg333:#333;
$bg666:#666;
$bg999:#999;
/*线条颜色*/
$lineCCC:#ccc;
$lineE4:#e4e4e4;
/*字体颜色*/
$font333:#333;
$font666:#666;
$font999:#999;
$fontFFF:#fff;
/**
 * [displayFlex 设置盒子的display属性为flex]
 * @return {[type]}           [description]
 */
@mixin displayFlex() {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

/**
 * [flex 设置盒子flex属性]
 * @param  {[number]} $num  [默认值为1]
 * @return {[type]}           [description]
 */
@mixin flex($num:1) {
  -webkit-box-flex: $num;
  -webkit-flex: $num;
  flex: $num;
}

%borderBase {
  content: '';
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  pointer-events: none; /* 防止点击触发 */
}

/**
 * [border 设置四边框]
 * eg: .border {
 *  @extend %border;
 * }
 */
%border {
  position: relative;
  &:after {
    border: 1px solid $lineE4;
    @extend %borderBase;
  }
}

/**
 * [border 设置圆角边框]
 * eg: .border {
 *  @extend %borderRadius;
 * }
 */
%borderRadius {
  position: relative;
  &:after {
    border: 1px solid $lineE4;
    border-radius: .2rem;
    @extend %borderBase;
  }
}

/**
 * [border 设置左边框]
 * eg: .border {
 *  @extend %borderLeft;
 * }
 */
%borderLeft {
  position: relative;
  &:after {
    @extend %borderBase;
    border-left: 1px solid $lineE4;
  }
}

/**
 * [border 设置右边框]
 * eg: .border {
 *  @extend %borderRight;
 * }
 */
%borderRight {
  position: relative;
  &:after {
    @extend %borderBase;
    border-right: 1px solid $lineE4;
  }
}

/**
 * [border 设置上边框]
 * eg: .borderTop {
 *  @extend %borderRight;
 * }
 */
%borderTop {
  position: relative;
  &:after {
    @extend %borderBase;
    border-top: 1px solid $lineE4;
  }
}

/**
 * [border 设置下边框]
 *  position: relative;
 *  @extend %borderBottom;
 * }
 */
%borderBottom {
  position: relative;
  &:after {
    @extend %borderBase;
    border-bottom: 1px solid $lineE4;
  }
}



@mixin border($color:$lineE4) {
  position: relative;
  &:after {
    border: 1px solid $color;
    @extend %borderBase;
  }
}


@mixin borderRadius($color:$lineE4,$radius:.2rem) {
  position: relative;
  &:after {
    border: 1px solid $color;
    border-radius: $radius;
    @extend %borderBase;
  }
}


@mixin borderLeft($color:$lineE4) {
  position: relative;
  &:after {
    @extend %borderBase;
    border-left: 1px solid $color;
  }
}


@mixin borderRight($color:$lineE4) {
  position: relative;
  &:after {
    @extend %borderBase;
    border-right: 1px solid $color;
  }
}


@mixin borderTop($color:$lineE4) {
  position: relative;
  &:after {
    @extend %borderBase;
    border-top: 1px solid $color;
  }
}


@mixin borderBottom($color:$lineE4) {
  position: relative;
  &:after {
    @extend %borderBase;
    border-bottom: 1px solid $color;
  }
}

@mixin borderNone() {
  position: relative;
  &:after {
    @extend %borderBase;
    border:none;
  }
}